import React, { useEffect, useState, useRef } from "react";
import { Button } from "antd";

export default function (props: any) {
    const serviceRef = useRef<any>(null);
    const [activeIndex, setActiveIndex] = useState(0);
    const [isClick, setIsClick] = useState(false);
    const intervalRef = useRef(isClick);
    const rightList = [
        { img: require("@/assets/imgs/display3.png") },
        { img: require("@/assets/imgs/picture.png") },
        { img: require("@/assets/imgs/display4.png") },
        { img: require("@/assets/imgs/display2.png") },
    ]
    const globalList = [
        { img: require("@/assets/imgs/13.png"), name: "数字店铺" },
        { img: require("@/assets/imgs/15.png"), name: "精准推广" },
        { img: require("@/assets/imgs/18.png"), name: "场景营销" },
        { img: require("@/assets/imgs/14.png"), name: "交易保障" },
        { img: require("@/assets/imgs/12.png"), name: "支付结算" },
        { img: require("@/assets/imgs/11.png"), name: "报关退税" },
        { img: require("@/assets/imgs/16.png"), name: "跨境物流" },
        { img: require("@/assets/imgs/19.png"), name: "金融服务" },
    ]
    useEffect(() => {
        let _interval: any = null;
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(({ isIntersecting }) => {
                if (isIntersecting) {
                    _interval = setInterval(() => {
                        if (intervalRef.current) {
                            _interval = null
                            clearInterval(_interval);
                            isClick && setIsClick(false);
                            intervalRef.current = false
                        } else {
                            setActiveIndex(n => {
                                return n < 2 ? n + 1 : 0
                            });
                        }
                    }, 2000)
                } else {
                    _interval && clearInterval(_interval);
                }
               
              })
        });
        observer.observe(serviceRef.current);
        return () => {
            _interval && clearInterval(_interval);
        }
    }, [])
    useEffect(() => {
        intervalRef.current = isClick
    })
    const handleClick = (index: number) => {
        setActiveIndex(index);
        setIsClick(true)
    }
    return (
        <div className="service" ref={serviceRef}>
            <div className="service-wrapper">
                <div className="service-title">
                    <span>轻松开店</span>
                    <span>深挖全球买家需求</span>
                    <span>全链路服务</span>
                </div>
                <div className="service-content">
                    <div className="service-left">
                        <div className={`left-item ${activeIndex === 0 && 'active'}`} onClick={() => handleClick(0)}>
                            <p className="title">AI生意助手</p>
                            <p className="desc">智能商品标题、图片与视频，接待买家，分析诊断商品，助力商家轻松获客快速成单</p>
                        </div>
                        <div className={`left-item ${activeIndex === 1 && 'active'}`} onClick={() => handleClick(1)}>
                            <p className="title">每天都有新商机</p>
                            <ul>
                                <li>· 极简开店：1个窗口完成所有运营操作</li>
                                <li>· 快速获客：新商家每天至少1 个新商机</li>
                                <li>· 专人指导：1V1店铺运营指导</li>
                            </ul>
                        </div>
                        <div className={`left-item ${activeIndex === 2 && 'active'}`} onClick={() => handleClick(2)}>
                            <p className="title">全链路数字外贸服务</p>
                            <p className="desc">提供 智能高效 全套数字外贸服务，一站解决您的所有需求</p>
                        </div>
                    </div>
                    <div className="service-right">
                        {
                            activeIndex === 0 ? (
                                <ul className="business">
                                    {
                                        rightList.map((item, index) => {
                                            return <li key={index}>
                                                <picture>
                                                    <img src={item.img} alt="" />
                                                </picture>
                                            </li>
                                        })
                                    }
                                </ul>
                            ) : (
                                activeIndex === 1 ? (
                                    <img className="dashboard" src={require('@/assets/imgs/dashboard.png')} alt="" />
                                ) : (
                                    <div className="global">
                                        <ul>
                                            {
                                                globalList.map( (item, index) => {
                                                    return (
                                                        <li key={index}>
                                                            <img src={item.img} alt="" />
                                                            <p>{item.name}</p>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                )
                            )
                        }
                       
                    </div>
                </div>
                <div className="submit-wrapper">
                    <Button className="btn-consult" type="primary" onClick={() => {
                        props.setShowFormModal(true)
                    }}>开店咨询</Button>
                </div>
            </div>
        </div>
    )
}